<div class="pac-page-header">
  <div class="pac-page-title">{{ 'PAC.Copilot.AICopilot' | translate: {Default: 'AI Copilot'} }}</div>
      
  <nav mat-tab-nav-bar class="pac-tab-nav-bar" displayDensity="cosy" color="accent" mat-align-tabs="start" mat-stretch-tabs="false" disableRipple
    [tabPanel]="tabPanel"
  >
    <span mat-tab-link [routerLink]="['./basic']"
      routerLinkActive #rla1="routerLinkActive"
      [routerLinkActiveOptions]="{exact: true}"
      [active]="rla1.isActive"
    >
      <mat-icon fontSet="material-icons-outlined" class="mr-1">generating_tokens</mat-icon>
      {{ 'PAC.KEY_WORDS.Basic' | translate: {Default: "Basic"} }}
    </span>
    @if (!organization()) {
      <span mat-tab-link [routerLink]="['./examples']"
        routerLinkActive #rla2="routerLinkActive"
        [active]="rla2.isActive"
      >
        <mat-icon fontSet="material-icons-outlined" class="mr-1">tips_and_updates</mat-icon>
        {{ 'PAC.KEY_WORDS.Examples' | translate: {Default: "Examples"} }}
      </span>
    }

    @if (organization()) {
      <span mat-tab-link [routerLink]="['./users']"
        routerLinkActive #rla4="routerLinkActive"
        [active]="rla4.isActive"
      >
        <mat-icon fontSet="material-icons-outlined" class="mr-1">data_usage</mat-icon>
        {{ 'PAC.Copilot.UserUsage' | translate: {Default: "User Usage"} }}
      </span>
    } @else {
      <span mat-tab-link [routerLink]="['./usages']"
        routerLinkActive #rla4="routerLinkActive"
        [active]="rla4.isActive"
      >
        <mat-icon fontSet="material-icons-outlined" class="mr-1">data_usage</mat-icon>
        {{ 'PAC.Copilot.OrgUsage' | translate: {Default: "Organization Usage"} }}
      </span>
    }

    @if (organization()) {
      <span mat-tab-link [routerLink]="['./overview']"
        routerLinkActive #rla4="routerLinkActive"
        [active]="rla4.isActive"
      >
        <mat-icon fontSet="material-icons-outlined" class="mr-1">browse_activity</mat-icon>
        {{ 'PAC.Copilot.Monitoring' | translate: {Default: "Monitoring"} }}
      </span>
    }
  </nav>
</div>

<mat-divider></mat-divider>
  
<mat-tab-nav-panel #tabPanel class="pac-page-body flex flex-col items-center"
  [@routeAnimations]="o.isActivated && o.activatedRoute.routeConfig.path">
  <router-outlet #o="outlet"></router-outlet>
</mat-tab-nav-panel>
